<template>
	<view class="wrap">

		<view class="dev-area">

			<view class="dev-cart">
				<view class="">
					<view class="dev-name">温度</view>
					<image class="dev-logo" src="../../static/temp_e.png" mode=""></image>
				</view>
				<view class="dev-data">{{temp}} ℃</view>
			</view>

			<view class="dev-cart">
				<view class="">
					<view class="dev-name">湿度</view>
					<image class="dev-logo" src="../../static/humi.png" mode=""></image>
				</view>
				<view class="dev-data">{{humi}} %</view>
			</view>

			<view class="dev-cart">
				<view class="">
					<view class="dev-name">心率</view>
					<image class="dev-logo" src="../../static/hrrest.png" mode=""></image>
				</view>
				<view class="dev-data">{{Hrrest}} BMP</view>
			</view>

			<view class="dev-cart">
				<view class="">
					<view class="dev-name">血氧</view>
					<image class="dev-logo" src="../../static/SPO2.png" mode=""></image>
				</view>
				<view class="dev-data">{{SpO2}} SpO2</view>
			</view>

			<view class="dev-cart">
				<view class="">
					<view class="dev-name">体温</view>
					<image class="dev-logo" src="../../static/temp_b.png" mode=""></image>
				</view>
				<view class="dev-data">{{temp_b}} ℃</view>
			</view>
			
			<view class="dev-cart">
				<view class="">
					<view class="dev-name">台灯</view>
					<image class="dev-logo" src="../../static/led.png" mode=""></image>
				</view>
				<switch checked="led" @change="onledSwitch" color="#f4ea2a" />
			</view>

		</view>

	</view>

</template>

<script>
  const { createCommonToken } = require('@/key.js');
  export default {
    data() {
      return {
        temp: '0.00',
        humi: '0.00',
        temp_b: '0.00',
        SpO2: '0.00',
        Hrrest: '0.00',
        led: false,
        token: '',
        timer: null
      };
    },
    onLoad() {
      const params = {
        author_key: '0W/wFGzB+9NWGbtlrVpgehRG4ebJJzi2+OI6CWxuvsmA1G9D9/mpl8ejDJgZeXGZ',
        version: '2022-05-01',
        user_id: '430015',
      };
      this.token = createCommonToken(params);
    },
    onShow() {
      this.fetchDevData();
      this.timer = setInterval(() => {
        this.fetchDevData();
      }, 3000);
    },
    onHide() {
      clearInterval(this.timer);
    },
    methods: {
      fetchDevData() {
        uni.request({
          url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',
          method: 'GET',
          data: {
            product_id: '71B0v25d88',
            device_name: 'project_1',
          },
          header: {
            'authorization': this.token
          },
          success: (res) => {
            console.log('API数据:', res.data);
            if (res.data.data && res.data.data.length >= 6) {
              const formatValue = (value) => {
                const num = parseFloat(value);
                return isNaN(num) ? '0.00' : num.toFixed(2);
              };
              this.Hrrest = formatValue(res.data.data[0].value);
              this.SpO2 = formatValue(res.data.data[1].value);
              this.humi = formatValue(res.data.data[2].value);
              this.led = res.data.data[3].value === 'true';
              this.temp = formatValue(res.data.data[4].value);
              this.temp_b = formatValue(res.data.data[5].value);
            }
          },
          fail: (err) => {
            uni.showToast({ title: '数据获取失败', icon: 'none' });
          }
        });
      },
      onledSwitch(event) {
        const value = event.detail.value;
        uni.request({
          url: 'https://iot-api.heclouds.com/thingmodel/set-device-property',
          method: 'POST',
          data: {
            product_id: '71B0v25d88',
            device_name: 'project_1',
            params: { led: value }
          },
          header: { 'authorization': this.token },
          success: () => {
            console.log('LED状态:', value ? '开启' : '关闭');
          },
          fail: () => {
            uni.showToast({ title: '操作失败', icon: 'none' });
          }
        });
      }
    }
  };
</script>

<style>
	.wrap {
		//边框线
		padding: 30rpx;
	}

	.dev-area {
		//卡片存放区域
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.dev-cart {
		//卡片边框
		height: 150rpx;
		width: 320rpx;
		border-radius: 30rpx;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-shadow: 0 0 15rpx #ccc;
	}

	.dev-name {
		//卡片名字
		font-size: 20rpx;
		text-align: center;
		color: #6d6d6d;

	}

	.dev-logo {
		//卡片logo
		height: 70rpx;
		width: 70rpx;
		margin-top: 10rpx;
	}

	.dev-data {
		//卡片数据
		font-size: 30rpx;
		color: #6d6d6d;
	}
</style>